<template>
  <div class="m-iselect">
    <span class="name">省份选择:</span>
    <div class="select-panel">
      <el-select
        v-model="pvalue"
        placeholder="省份"
      >
        <el-option
          v-for="item in province"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select
        v-model="cvalue"
        :disabled="!city.length"
        placeholder="城市"
      >
        <el-option
          v-for="item in city"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <span class="name">直接搜索:</span>
    <div class="select-panel">
      <el-autocomplete
        v-model="input"
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入城市中文或拼音"
        @select="changeCity"
      />
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
export default {
  data() {
    return {
      province: [],
      pvalue: '',
      city: [],
      cvalue: '',
      input: '',
      cities: [] // 全国城市列表，为了直接搜索城市
    }
  },
  watch: {
    pvalue: async function (newPvalue) {
      const self = this
      const { status, data: { city } } = await self.$axios.get(`/geo/province/${newPvalue}`)
      if (status === 200) {
        self.city = city.map((item) => {
          return {
            value: item.id,
            label: item.name
          }
        })
        self.cvalue = ''
      }
    },
    cvalue: function (newPvalue) {
      let cityName = ''
      let provinceName = ''
      this.city.map((item) => {
        if (item.value === this.cvalue) {
          cityName = item.label
        }
      })
      this.province.map((item) => {
        if (item.value === this.pvalue) {
          provinceName = item.label
        }
      })
      this.$store.commit('geo/setPosition', { city: cityName, province: provinceName })
      this.$store.dispatch('home/updateHotPlace', cityName)
      this.$router.push('/')
    }
  },
  mounted: async function () {
    const self = this
    const { status, data: { province } } = await self.$axios.get('/geo/province')
    if (status === 200) {
      self.province = province.map((item) => {
        return {
          value: item.id,
          label: item.name
        }
      })
    }
  },
  methods: {
    querySearchAsync: _.debounce(async function (query, cb) {
      const self = this
      if (self.cities.length) {
        cb(self.cities.filter(item => item.value.indexOf(query) > -1))
      } else {
        const { status, data: { city } } = await self.$axios.get('/geo/city')
        if (status === 200) {
          self.cities = city.map((item) => {
            return {
              value: item.name
            }
          })
          cb(self.cities.filter(item => item.value.indexOf(query) > -1))
        } else {
          // eslint-disable-next-line standard/no-callback-literal
          cb([])
        }
      }
    }, 200),
    changeCity(item) {
      const city = item.value
      this.$store.commit('geo/setPosition', { city, province: '' })
      this.$store.dispatch('home/updateHotPlace', city)
      this.$router.push('/')
    }
  }
}
</script>

<style lang="scss">
  @import "@/assets/css/changeCity/iselect.scss";
</style>
